<template>
  <div>
    <div class="head">
      <div class="head_left">
        <div class="head_leftH">余额总览</div>
        <div class="head_leftB">
          <div class="head_leftBbox">
            <div class="num">¥{{ info.withdrawBalance }}</div>
            <p class="title">可用余额</p>
          </div>
          <div class="head_leftBbox">
            <div class="num">¥{{ info.freezeBalance }}</div>
            <p class="title">存管余额</p>
          </div>
        </div>
      </div>
      <div class="head_left headcolor">
        <div class="head_leftH">交易订单数</div>
        <div class="head_leftB">
          <div class="head_leftBbox">
            <div class="num">{{ info.dayTrading }}</div>
            <p class="title">今日</p>
          </div>
          <div class="head_leftBbox">
            <div class="num">{{ info.weekTrading }}</div>
            <p class="title">本周</p>
          </div>
          <div class="head_leftBbox">
            <div class="num">{{ info.monthTrading }}</div>
            <p class="title">本月</p>
          </div>
        </div>
      </div>
      <div class="head_left">
        <div class="head_leftH">交易金额</div>
        <div class="head_leftB">
          <div class="head_leftBbox">
            <div class="num ellipseHide">{{ info.dayBalance }}</div>
            <p class="title">今日（元）</p>
          </div>
          <div class="head_leftBbox">
            <div class="num ellipseHide">{{ info.cumulativeBalance }}</div>
            <p class="title">累计（元）</p>
          </div>
        </div>
      </div>
    </div>
    <div class="head" style="margin-top: 20px">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="交易时间：">
          <el-date-picker
            :clearable="false"
            v-model="date"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用户查询：">
          <el-input
            v-model="formInline.customerQuery"
            placeholder="预付卡ID/手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="资金流向：">
          <el-select v-model="formInline.flowType" placeholder="请选择">
            <el-option
              v-for="item in flowTypeOptions"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交易明细类型：">
          <el-select v-model="formInline.billType" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交易单号：">
          <el-input
            v-model="formInline.relevancyNo"
            placeholder="请输入交易单号"
          ></el-input>
        </el-form-item>
        <el-form-item label="交易流水号：">
          <el-input
            v-model="formInline.relevancySerialNo"
            placeholder="请输入交易流水号"
          ></el-input>
        </el-form-item>
        <el-form-item label="卡类型" prop="cardType">
          <el-select v-model="formInline.cardType" placeholder="请选择">
            <el-option
              v-for="item in cardTypeList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付公司：">
          <el-select v-model="formInline.payProvider" placeholder="请选择" filterable>
            <el-option v-for="item in payProviderLs" :key="item.id" :label="item.value" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="sumit_button" type="primary" @click="search"
            >查询</el-button
          >
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="assets_detail">
      <div class="listBox_head">
        <export-excel-button
          title="蜜链盟账单"
          action="/bg/merchant/data/merchantBgBills/export"
          :params="ExportParams"
        />
      </div>

      <div class="assets_B">
        <ex-table
          ref="table"
          :loading="loading"
          :table-column="tableColumn"
          :table-data="tableData"
          @pageSizeChange="handleSizeChange"
          @currentPageChange="handleCurrentChange"
        >
        <template v-slot:operate="{ scope }">
          <el-button @click="lookInsureDetail(scope.row)" type="primary" size="small" plain v-if="scope.row.billType==15">查看</el-button>
        </template>
        </ex-table>
      </div>
    </div>
    <div class="bottom">
      <el-button type="primary" @click="back">返回</el-button>
    </div>
    <!-- 保险提现详情 -->
    <insureDetail v-if="detailDialog" :visible.sync="detailDialog" :id="detailDialogId" />
  </div>
</template>
<script>
import {
  adminGetBalance,
  adminGetTradingList,
  adminDict,
  merchantBgBills,
} from "@/api/merchants";
import handlePageMixin from "@/mixins/handlePageMixin";
import ExportExcelButton from "@/components/ExportExcelButton/index";
import insureDetail from "./components/insureDetail";
export default {
  name: "TodoCenter",
  components: { ExportExcelButton,insureDetail },
  mixins: [handlePageMixin],
  data() {
    return {
      loading: false,
      date: [],
      dictType: "union_asset_ticket_clearing_time_type", //统一字典下拉框查询参数
      id: "",
      flowTypeOptions:[
        {
          id: "1",
          value: "流入",
        },
        {
          id: "2",
          value: "流出",
        },
      ],//资金流向数组
      cardTypeList:[],//卡类型数组
      options2:[],
      payProviderLs:[],//支付公司数组下拉
      detailDialog: false,
      detailDialogId:'',
      integral: {
        id: "", //交易单号
        changeType: "", //余额类型
        type: "", //交易明细类型
        startTime: "", //交易开始时间
        endTime: "", //交易结束时间
      },
      formInline: {
        customerQuery: "", //用户查询 预付卡ID/手机号
        cardType: "", //预付卡类型 asset_card_type
        transactionTimeStart: "", //交易时间
        transactionTimeEnd: "", //交易时间 结束
        flowType: "", //资金流向 '（1 流入 2 流出）'
        billType: "", //明细类型 1消费 2提现 3购卡 4充值  5余额消费
        relevancyNo: "", //支付开始时间
        relevancySerialNo: "", //支付结束
        merchantId: "",
        proceedsType: "",
        payProvider: "", //支付公司
      },
      info: {},
      tableData: [],
      tableColumn: [
        // { prop: "merchantName", label: "商户账号名称",width: 130 },
        { prop: "shopName", label: "店铺名称" },
        { prop: "relevancyNo", label: "交易单号" },
        { prop: "relevancySerialNo", label: "交易流水号",width: 130 },
        { prop: "cardNo", label: "卡号" },
        { prop: "cardTypeDict", label: "卡类型" },
        { prop: "customerPhone", label: "手机号",width: 130 },
        { prop: "transactionTime", label: "交易成功时间", width: 155 },
        // { prop: "fundFlowDict", label: "资金流向" },
        { prop: "billTypeDict", label: "交易明细类型",width: 140 },
        { prop: "billMoney", label: "交易金额", width: 120 },
        { prop: "discount", label: "优惠", width: 120 },
        {
          prop: "cardPayMoney",
          label: "卡余额支付",
          width: 120,
        },
        { prop: "receivedMoney", label: "实际支付", width: 120 },
        { prop: "platformProcedureFee", label: "手续费", width: 120 },
        { label: "可用金额", width: 120, children:[{ prop: "withdrawMoney", label: "收入/支出", width: 120 },{ prop: "changeWithdrawMoney", label: "可用余额", width: 120 },]},
        { label: "存管金额", width: 120, children:[ { prop: "freezeMoney", label: "收入/支出", width: 120 },{ prop: "changeFreezeMoney", label: "存管总额", width: 120 },{ prop: "cardFreezeMoney", label: "卡存管", width: 120 },{ prop: "insFreezeMoney", label: "保险存管", width: 120 },]},
        { prop: "payProviderDict", label: "支付公司", width: 120 },
        { prop: "paySourceDict", label: "来源", width: 120 },
        
        { prop: "remark", label: "备注", width: 120 },
        { label: "操作", slot: true, slotName: "operate" },
      ],
    };
  },
  computed: {
    ExportParams() {
      const { id: ticketId } = this;
      const params = {
        ...this.pageOptions,
        ...this.formInline,
        merchantId: this.id,
      };
      return params;
    },
  },
  created() {
    let query = this.$route.query;
    this.id = query.id;
    this.getAdminDict();
    this.getinfo();
    this.getList();
    
  },
  methods: {
    change(e) {
      console.log(e);
      if (e == 1) {
        this.dictType = "money_wallet_can_withdraw_balance_log_type";
      } else if (e == 2) {
        this.dictType = "money_wallet_activity_balance_log_type";
      } else if (e == 3) {
        this.dictType = "money_wallet_freeze_balance_log_type";
      } else {
        this.dictType = "";
        this.integral.type = "";
        this.options2 = [
          {
            id: "",
            value: "全部",
          },
        ];
        return;
      }
      this.getDict();
    },
    getAdminDict() {
      //获取字典
      const params = {
        dictType: "merchant_bill_type,asset_card_type,pay_provider",
      };
      adminDict(params).then((res) => {
        var arr = [
          {
            id: "",
            value: "全部",
          },
        ];
        this.options2 = arr.concat(res.result[0].dictList);
        this.cardTypeList = arr.concat(res.result[1].dictList);
        this.payProviderLs = arr.concat(res.result[2].dictList);
      });
    },
    getinfo() {
      const params = {
        merchantId: this.id,
      };
      adminGetBalance(params).then((res) => {
        this.info = res.result;
      });
    },
    search() {
      //搜索
      this.formInline.transactionTimeStart = this.date[0];
      this.formInline.transactionTimeEnd = this.date[1];
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    reset() {
      //重置
      this.formInline = {};
      this.date = [];
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    getList() {
      //获取钱包列表
      const params = {
        ...this.pageOptions,
        ...this.formInline,
        merchantId: this.id,
      };
      this.loading = true;
      console.log(params);
      merchantBgBills(params)
        .then((res) => {
          const { total, records } = res.result;
          this.tableData = records;
          this.$refs.table.pageOptions.total = total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //查看保险提现详情
    lookInsureDetail(row){
      this.detailDialogId = row.relevancyNo
      this.detailDialog = true
    },
    back() {
      this.$router.push({
        path: "/merchants/MerchantsList",
      });
    },
  },
};
</script>
<style scoped>
.head {
  display: flex;
  align-items: center;
  box-shadow: 0px 4px 12px 0px rgba(1, 41, 99, 0.06);
  border-radius: 8px;
  background-color: #ffffff;
  padding: 20px;
}
.head_left {
  padding: 10px 10px;
  height: 122px;
  /* width: 32%; */
  /* min-width: 300px; */
  width: auto;
  border-radius: 8px;
  background: linear-gradient(180deg, #35c2f5, #00abff);
  box-shadow: 2px 4px 16px 0px rgba(107, 201, 255, 0.6);
  color: #ffffff;
  margin-right: 10px;
}
.head_leftH {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
}
.head_leftB {
  display: flex;
  align-items: center;
}
.head_leftBbox {
  /* width: calc(100% / 3); */
  padding: 0 10px;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.num {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
  font-weight: bold;
}
.title {
  margin-bottom: 10px;
  font-size: 14px;
}
.ellipseHide {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.head_right {
  /* display: flex;
  justify-content: center;
  flex-direction: column; */
  height: 122px;
  padding: 10px 0px;
  width: 33%;
  border-radius: 8px;
  box-shadow: 2px 4px 16px 0px rgba(255, 192, 107, 0.6);
  color: #ffffff;
  background: linear-gradient(180deg, #ffb34b, #ff9300);
  margin-left: 40px;
}
.headcolor {
  box-shadow: 2px 4px 16px 0px rgba(255, 192, 107, 0.6);
  background: linear-gradient(180deg, #ffb34b, #ff9300);
}
.head_right .num {
  margin-top: 32px;
}
.assets_detail {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px;
  margin-top: 20px;
}
.listBox_head {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}
.assets_H {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.el-form--inline .el-form-item {
  margin-right: 20px;
  margin-bottom: 22px;
}
.bottom {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.bottom .el-button--medium {
  padding: 10px 54px;
}
</style>
